<template>
  <el-container class="order-container">
    <el-main>
      <el-row :gutter="10">
        <table-view
          :templateDiv="{}"
          :columns="recordsTableContent"
          :pageList="courseOrderList">
          <template slot="payAmount" slot-scope="scope">
            ￥{{scope.row.payAmount}}
          </template>
        </table-view>

        <!--分页-->
        <pagination-view  :pagesize="pageInfo.pageSize"
          :currentPage="pageInfo.pageNumber"
          :total="total"
          @size-change="sizeChange"
          @current-change="pageChange"
        ></pagination-view>
      </el-row>
    </el-main>
    <el-footer></el-footer>

  </el-container>
</template>

<script>
  import TableView from '@/components/TableView'
  import PaginationView from '@/components/PaginationView'

  import * as pageApi from '@/api/user/userManage'

  export default {
    name: 'inviteRecordInfo',
    components: {
      TableView,PaginationView
    },
    props:{
      active:{
        type:String
      }
    },
    data() {
      return {
        id: '',
        pageInfo: {
          pageNum: 1,
          pageSize: 20,
          userId: ''
        },
        total:0,
        courseOrderList: [],
        recordsTableContent: [{
          field: 'createTime',
          label: '手机号',
        }, {
          field: 'flowName',
          label: '昵称',
        }, {
          field: 'bonus',
          label: '注册时间'
        }, {
          field: 'bonus',
          label: '当前状态'
        }],
      }
    },
    watch:{
      active:{
        handler(val){
          if(val === 'invitation'){
            this.getData()
          }
        },
        immediate:true
      }
    },
    methods: {
      // pageSize变化函数
      sizeChange(val) {
        this.pageInfo.pageSize = val
        this.getData()
      },
      // page变化函数
      pageChange(val) {
        this.pageInfo.pageNumber = val
        this.getData()
      },
      getData() {
        pageApi.userInviteRecordPage(this.pageInfo).then(res => {
          this.courseOrderList = res.body.records
          this.total = Number(res.body.total)
          this.pageInfo.pageNumber = Number(res.body.pageNumber) || 1
        })
      }

    },
    mounted() {
      let { id } = this.$route.query
      this.id = id
      this.pageInfo.userId = id
    }
  }
</script>

<style lang="scss" scoped>
  .bottom-line-area .bottom-line:last-child {
    border: none;
  }

  .order-container {
    font-pageSize: 13px;
  }

  h4 {
    border-left: 1px solid #666;
    padding-left: 8px;
  }

  p {
    padding-left: 15px;
  }

  .order-statue {
    background: #ddd;
    padding: 8px;
  }

  .bottom-line {
    clear: both;
    border-bottom: 2px solid #666;
    padding-bottom: 10px;
    /*padding-top: 10px;*/
  }
</style>
